<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-jQuery属性操作</title>
  <script src="jquery.js"></script>
</head>

<body>
  <a href="http://www.baidu.com" title="挺好">百度</a>
  <input type="checkbox" checked>
  <div index="1" data-current="0">我是div</div>
  <span>123</span>
  <script>
    $(function () {
      // 默认属性：
      // 1. 获取属性值
      // element.prop('属性名')
      console.log($("a").prop('title'));
      console.log($("a").prop('href'));

      // 2. 设置属性值
      // element.prop('属性名', '属性值')
      $('a').prop('title', '没错')

      // 3. 根据input复选框的选中 与 取消选中状态 打印checked
      $("input").change(
        function () {
          console.log($(this).prop("checked"));
        }
      )


      // 自定义属性：
      // 1. 获取自定义属性值 类似原生 getAttribute()
      console.log($("div").attr("index"));

      // 2. 设置自定义属性值 类似原生 setAttribute()
      console.log($("div").attr("index", 2));

      // 3. 获取H5新增自定义属性值
      console.log($("div").attr("data-current"));


      // data("属性名", "属性值")
      // 1. 数据缓存，数据存放在元素的内存中，页面刷新后，数据释放
      $("span").data("uname", "chen");
      console.log($("span").data("uname"));
      // 2. 这个方法也可以获取data-index h5自定义属性
      // a. 不用写data-
      // b. 返回数字型 (如果字符可以解析为数字型的话)
      console.log($("div").data("current"));

    })
  </script>
</body>


</html>